<!doctype html>
<html>
<head>
  <title>Learning jQuery</title>
  <meta charset="utf-8" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 300;
    }

    #menuBar {
      width: 100%;
      height: 40px;
      background-color: #DCDCDC;
      border-bottom: 1px solid grey;
    }

    #logo {
      padding: 5px 0 0 20px;
      font-weight: bold;
      font-size: 120%;
      float: left;
    }

    #buttonDiv {
      float: right;
      padding: 5px 10px 0 0;
    }

    #runButton {
      font-size: 120%;
    }

    #toggles {
      width: 178px;
      margin: 0 auto;
      padding: 0;
      list-style: none;
      border: 1px solid grey;
      height: 27px;
      position: relative;
      top: 5px;
    }

    #toggles li {
      float: left;
      border-right: 1px solid grey;
      padding: 3px;
      padding-right: 5px;
    }

    .class {
      clear: both;
    }

    .codeContainer {
      height: 100%;
      width: 50%;
      float: left;
      border: none;
      position: relative;
    }

    .codeContainer textarea{
      height: 100%;
      width: 100%;
      border-right: 1px solid grey;
      font-family: monospace;
      font-size: 100%;
      padding: 5px;
      box-sizing: border-box;
    }

    .codeLabel {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    #CSSContainer, #JSContainer {
      display: none;
    }

    iframe {
      position: relative;
      height: 100%;
      width: 100%;
      top: 1px;
      left: 15px;
      margin: 0;
      padding: 0;
      border: 1px solid grey;
      /*border: none;*/
    }

    .selected {
      background-color: grey;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="menuBar">
      <div id="logo">
        CodePlayer
      </div>

      <div id="buttonDiv">
        <button id="runButton">Run</button>
      </div>

      <ul id="toggles">
        <li class="toggle selected">HTML</li>
        <li class="toggle">CSS</li>
        <li class="toggle">JS</li>
        <li class="toggle selected" style="border:none">Result</li>
      </ul>
    </div>

    <div class="clear"></div>

    <div class="codeContainer" id="HTMLContainer">
      <div class="codeLabel">HTML</div>
      <textarea id="htmlCode">Sample code</textarea>
    </div>
    <div class="codeContainer" id="CSSContainer">
      <div class="codeLabel">CSS</div>
      <textarea id="cssCode">Sample code</textarea>
    </div>
    <div class="codeContainer" id="JSContainer">
      <div class="codeLabel">JS</div>
      <textarea id="jsCode">Sample code</textarea>
    </div>
    <div class="codeContainer" id="ResultContainer">
      <div class="codeLabel">Result</div>
      <iframe id="resultFrame"></iframe>
    </div>
  </div>

  <script type="text/javascript">
    var windowHeight=$(window).height();
    var menubarHeight=$("#menuBar").height();
    var codeContainerHeight=windowHeight-menubarHeight;
    $(".codeContainer").height(codeContainerHeight+"px");
    $(".toggle").click(function(){
      $(this).toggleClass("selected");
      var activeDiv=$(this).html();
      $("#"+activeDiv+"Container").toggle();

      var showDivs=$(".codeContainer").filter(function(){
        return ($(this).css("display")!="none");
      }).length;

      var width=100/showDivs;
      $(".codeContainer").width(width+"%");
    });

    $("#runButton").click(function(){
      $("iframe").contents().find("html").html('<style>' + $("#cssCode").val() + '</style>' + $("#htmlCode").val());

         /*document.getElementById("resultFrame").contentWindow.eval($("#jsCode").val());*/
    });
  </script>
</body>
</html>

